<template>
    <div class="warp" style="height:100%;">
            <navbar :title="$t('find')" :showBackButton=false :showLeftArrow=false>
                <template #left>
                    <router-link tag="a" slot="left" class="head-icon" to="/messageNotification">
                        <span class="iconfont icon-youjian"></span>
                        <label :class="{'cur' : (mesNum > 0)}"></label>
                    </router-link>
                </template>
            </navbar>
        <div style="height: 100%;overflow: auto;padding: 56px 0 57px;box-sizing: border-box;">
            <!--内容 start-->
            <div style="margin-bottom: 56px;">
                <div class="top-box">
                    <router-link tag="div" class="box-warp" to="/LearningCalendar">
                        <i class="iconfont icon-riqishijian"></i>
                        <span>{{$t('course_rl_10')}}</span>
                    </router-link>
                    <router-link tag="div" to="/announce" class="box-warp">
                        <i class="iconfont icon-gonggao"></i>
                        <span>{{ $t("find_announce") }}</span>
                        <label v-if="announceTotal&& announceTotal>0">{{announceTotal > 99 ? '99+': announceTotal}}</label>
                    </router-link>
                </div>
                <!--学习包 start-->
                <div>
                    <p class="header-title-02">{{ $t("find_learning_package") }}</p><!--学习包-->
                    <ul class="module-box-03 white-bg bottom-shadow clearfix">
                        <li>
                           <span class="icon-box">
                               <em class="iconfont icon-tuijian"></em>
                           </span>
                            <router-link tag="div" to="/recommendCourse" class="title-01"><!--推荐课程-->
                                <!-- 职级发展地图 -->
                                <span>{{ $t("cos_recommend") }}</span>
                                <i class="arrow-right"></i>
                            </router-link>
                        </li>
                        <li>
                            <span class="icon-box">
                                <em class="iconfont icon-gengduo"></em>
                            </span>
                            <router-link tag="div" to="/knowledge/special" class="title-01">
                                <span>{{ $t("konwledge_special_title") }}</span><!--知识专题-->
                                <i class="arrow-right"></i>
                            </router-link>
                        </li>
                        <li>
                            <span class="icon-box">
                                <em class="iconfont icon-daohang"></em>
                            </span>
                            <router-link tag="div" to="/studyMap" class="title-01">
                                <span>{{ $t("cos_type_map") }}</span><!--学习地图-->
                                <i class="arrow-right"></i>
                            </router-link>
                        </li>
                        <li>
                           <span class="icon-box">
                               <em class="iconfont icon-gangwei"></em>
                           </span>
                            <router-link tag="div" to="/keyPosition" class="title-01">
                                <span>{{ $t("find_position_learning") }}</span>
                                <!-- 关键岗位学习地图 -->
                                <i class="arrow-right"></i>
                            </router-link>
                        </li>
                        <li>
                           <span class="icon-box">
                               <em class="iconfont icon-zuzhijigou"></em>
                           </span>
                            <router-link tag="div" to="/gradeMapList" class="title-01">
                                <!-- 职级发展地图 -->
                                <span>{{ $t("find_profession_develop") }}</span>
                                <i class="arrow-right"></i>
                            </router-link>
                        </li>
                    </ul>
                </div>
                <!--学习包 end-->
                <!--社区活动 start-->
                <div>
                    <p class="header-title-02">{{ $t("find_community") }}</p><!--社区活动-->
                    <ul class="module-box-03 white-bg bottom-shadow clearfix">
                        <router-link tag="li" to="/freshInformation">
                            <span class="icon-box">
                                <em class="iconfont icon-zixun"></em>
                            </span>
                            <div class="title-01">
                                <span>{{ $t("find_information") }}</span><!--资讯-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <router-link tag="li" to="/know/knowList">
                            <span class="icon-box">
                                <em class="iconfont icon-wenda"></em>
                            </span>
                            <div class="title-01">
                                <span>{{ $t("find_question_and_answer") }}</span><!--在线问答-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <router-link tag="li" to="/publicVoting">
                           <span class="icon-box">
                               <em class="iconfont icon-toupiao"></em>
                           </span>
                            <div class="title-01">
                                <span>{{ $t("find_vote") }}</span><!--投票-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <router-link tag="li" to="/evaluation">
                            <span class="icon-box">
                                <em class="iconfont icon-rili"></em>
                            </span>
                            <div class="title-01">
                                <span>{{ $t("find_survey") }}</span><!--调查问卷-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                        <li @click="JumpPointsMall()">
                           <span class="icon-box">
                               <em class="iconfont icon-gouwuchezhengpin"></em>
                           </span>
                            <div class="title-01">
                                <span>{{ $t("find_integralmall") }}</span><!--积分商城-->
                                <i class="arrow-right"></i>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--社区活动 end-->
                <!--其他 start-->
                <div>
                    <p class="header-title-02">{{ $t("cos_other") }}</p><!--其他-->
                    <ul class="module-box-03 white-bg bottom-shadow clearfix">
                        <router-link tag="li" to="/live">
                           <span class="icon-box">
                               <em class="iconfont icon-live"></em>
                           </span>
                            <div class="title-01">
                                <!-- 直播 -->
                                <span>{{ $t("find_live") }}</span>
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
<!--                        <router-link tag="li" to="/publicClass/index">-->
<!--                           <span class="icon-box">-->
<!--                               <em class="iconfont iconxiangmu"></em>-->
<!--                           </span>-->
<!--                            <div class="title-01">-->
<!--                                <span>{{ $t("find_open_course") }}</span>&lt;!&ndash;公开课&ndash;&gt;-->
<!--                                <i class="arrow-right"></i>-->
<!--                            </div>-->
<!--                        </router-link>-->
                        <router-link tag="li" to="/instructorList">
                            <span class="icon-box">
                                <em class="iconfont icon-jiangshi"></em>
                            </span>
                            <div class="title-01">
                                <span>{{ $t("find_instructor_style") }}</span><!--讲师风采-->
                                <i class="arrow-right"></i>
                            </div>
                        </router-link>
                    </ul>
                </div>
                <!--其他 end-->
            </div>
            <!--内容 end-->
        </div>
        <bottom-navigation :active=2></bottom-navigation>
        <div class="mask-white" v-if="moreShow" @click="hideMore"></div>
        <div class="mask-layer" v-if="popupMask" @click="maskLayer()"></div>
        <div class="popup-box white-bg" v-if="popupLayerCreate">
            <ul class="pic-box-list clearfix">
                <li @click="picBoxLayer('IMAGE')">
                    <span>
                        <i class="pic-icon"></i>
                    </span>
                    <p>{{ $t("IMAGE") }}</p><!--图片-->
                </li>
                <li @click="picBoxLayer('VEDIO')">
                    <span>
                        <i class="video-icon"></i>
                    </span>
                    <p>{{ $t("VEDIO") }}</p><!--视频-->
                </li>
                <li @click="picBoxLayer('ARTICLE')">
                    <span>
                        <i class="essay-icon"></i>
                    </span>
                    <p>{{ $t("ARTICLE") }}</p><!--文章-->
                </li>
                <li @click="picBoxLayer('DOCUMENT')">
                    <span>
                        <i class="doc-icon"></i>
                    </span>
                    <p>{{ $t("DOCUMENT") }}</p><!--文档-->
                </li>
            </ul>
            <p class="paddingLR15 color999 font-size12" style="margin-top: 30px;"><i class="remind-icon"></i>{{ $t("sharing_tips") }}</p>
        </div>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin.js';
export default {
    name: 'findNav',
    mixins: [mixin],
    data() {
        return {
            announceTotal: 0, // 公告总条数
            mesNum: 0, //消息
            encId: '', //获取用户id
            moreShow: false,
            popupMask: false, //分享知识弹出层
            popupLayerCreate: false //分享知识弹出层
        };
    },
    methods: {
        init() {
            window.localStorage.removeItem('formUrl');
            //消息提醒
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/home/top/count',
                params: {
                    isMobile: '1'
                }
            }).then((res) => {
                this.mesNum = res.data.unreadWebMessage;
            });
            this.encId = this.$route.params.encId;
        },
        getMore() {
            this.moreShow = true;
        },
        hideMore() {
            this.moreShow = false;
        },
        JumpPointsMall() {
            let encId = this.encId;
            this.$router.push({path: '/mall/list'});
        },
        addKnowledge() {
            this.moreShow = false;
            this.popupMask = true;
            this.popupLayerCreate = true;
        },
        maskLayer() {
            this.popupMask = false;
            this.popupLayerCreate = false;
        },
        picBoxLayer(type) {
            this.popupMask = false;
            this.popupLayerCreate = false;
            this.$router.push({path: '/addShare', query: {type}});
        },
        /**
         * 获取公告条数
         * */
        getFreshAnnounce() {
            // this.$axios({
            //     method: 'POST',
            //     url: `/app/api/trainee/announce/list/0`,
            //     params: {
            //         pageNo: this.pageNo,
            //         pageSize: this.pageSize
            //     }
            // }).then(res => {
            //     this.announceTotal = res.data.totalRecord;
            // });
            this.$axios.get('/app/api/trainee/home/messgae/count?isMobile=1').then(res => {
                if (res.data) {
                    this.announceTotal = res.data.announceCount;
                }
            });
        }
    },
    mounted() {
        // this.$store.commit('addKeepAliveList', 'findNav');
        this.init();
        this.getFreshAnnounce();
    },
    activated() {
        this.init();
        this.getFreshAnnounce();
    },
    beforeRouteLeave(to, from, next) {
        if (to.name === 'KnowList') {
            this.$store.commit('removeKeepAliveList', 'KnowIndex');
        } else if (to.name === 'voting') {
            //this.$store.commit('removeKeepAliveList', 'votingIndex');
        } else if (to.name === 'publicCourse') {
            this.$store.commit('removeKeepAliveList', 'publicCourseIndex');
        }
        next();
    }
};
</script>

<style scoped lang="less">
.head-icon{
    width: 46px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    span{
        font-size: 25px;
        color: #333;
    }
    .cur{
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
        background: #E62121;
        right: 10px;
        top: 16px;
    }
}
.top-box{
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 27px 15px 0;
    .box-warp{
        width: 48%;
        padding: 20px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        border-radius: 5px;
        position: relative;
        i{
            font-size: 18px;
        }
        span{
            margin-left: 5px;
        }
        label{
            position: absolute;
            top: -4px;
            right: -4px;
            padding: 3px 6px;
            text-align: center;
            border-radius: 50%;
            font-size: 8px;
            background: #E62121;
            color: #fff;
        }
    }
}
.header-title-02{
    font-size: 14px;
    color: #999999;
    padding: 30px 15px 10px;
}
.module-box-03 li {
    height: 55px;
    line-height: 55px;
    font-size: 16px;
    padding-left: 64px;
}
.module-box-03 .icon-box {
    float: left;
    margin-left: -50px;
    margin-top: 12px;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    // padding: 13px 0 0 13px;
    background: #EEEEEE;
    border-radius: 50%;
    em {
        font-size: 18px;
    }
}
.module-box-03 .title-01 {
    border-bottom: 1px solid #c8c7cc;
}
.module-box-03 .title-01 .arrow-right {
    margin: 23px 15px 0 0;
}
.module-box-03 li:nth-last-child(1) .title-01 {
    border-bottom: 0;
}
.header-icon-more {
    position: relative;
}
.word-btn-list {
    width: 80px;
    padding: 5px 15px;
    background: #ffffff;
    border-radius: 2px;
    position: absolute;
    top: 15px;
    right: 10px;
    z-index: 100;
    box-shadow: 0 1px 2px #cccccc;
    text-align: center;
    li {
        padding: 15px 0;
        border-bottom: 1px solid #e6e6e6;
        font-size: 14px;
        color: #1a1a1a;
        &:nth-last-child(1) {
            border-bottom: 0;
        }
    }
}
.mask-white {
    width: 100%;
    height: 100%;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}
</style>
